<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <title>shape</title>
    <style type="text/css">
    .triangle-up{
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 15px solid rgb(219, 19, 59);
    }
    #square {
        width: 100px;
        height: 100px;
        background: red;
    }
    </style>
</head>

<body>
    <h4>the shape of css</h4>
    <div id="square"></div>
    <div class="triangle-up">
        
    </div>

    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {

        });
    </script>
</body>

</html>